<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta charset="UTF-8">
<title>-webkit-margin demo</title>


<link rel="stylesheet" type="text/css" href="margin-collapse_001_1.css" media="all">
</head>
<body>
<dl id="adjust_box">
	<dt>-webkit-margin</dt>
	<dd><span>-webkit-margin-bottom-collapse</span>
		<label><input name="bottom" id="" type="radio">collapse</label>
		<label><input name="bottom" id="" type="radio">discard</label>
		<label><input name="bottom" id="" type="radio">separate</label>
	</dd>
	<dd><span>-webkit-margin-top-collapse</span>
		<label><input name="top" id="" type="radio">collapse</label>
		<label><input name="top" id="" type="radio">discard</label>
		<label><input name="top" id="" type="radio">separate</label>
	</dd>
	<dd><span>-webkit-margin-collapse</span>
		<label><input name="collapse" id="" type="radio">collapse</label>
		<label><input name="collapse" id="" type="radio">discard</label>
		<label><input name="collapse" id="" type="radio">separate</label>
	</dd>
	
	<dd><span>-webkit-margin-start</span>
		<input min="0" max="100" value="0" id="slideStart" type="range"><b class="value" id="valueOfStart"><i>0</i>px</b>
	</dd>
</dl>
<div id="display_box">
	<div id="one_element" style="background: transparent url('female.jpg') no-repeat scroll 0% 0%;"><div class="pop" id="pop1"><b></b></div></div>
	<div id="another_element" style="background: transparent url('male.jpg') no-repeat scroll 0% 0%;"><div class="pop" id="pop2"><b></b></div></div>
</div>

<script type="text/javascript">
	var $ = function(a) {
			return document.getElementById(a);
		},
		adjustBox = $('adjust_box'),
		inputGroup = document.getElementsByTagName('input'),
		pop1 = $('pop1'),
		pop2 = $('pop2'),
		oneElement = $('one_element'),
		anotherElement = $('another_element'),
		slideStart = $('slideStart'),
		valueOfStart = $('valueOfStart'),
		makeEffects = function(methodString,eff){
			for(var i = 0; i <= inputGroup.length - 2; i++) {
				inputGroup[i].checked = false;
			}
			pop1.innerHTML = '<b></b>margin-bottom:50px;';
			pop2.innerHTML = '<b></b>margin-top:10px;';
			oneElement.style.marginBottom = '50px';
			anotherElement.style.marginTop = '10px';
			anotherElement.style.webkitMarginTopCollapse = '';
			oneElement.style.webkitMarginBottomCollapse = '';
			oneElement.style.webkitMarginCollapse = '';
			if(methodString == 'b') {
				switch(eff) {
					case 'collapse' : oneElement.style.webkitMarginBottomCollapse = 'collapse'; break;
					case 'discard' : oneElement.style.webkitMarginBottomCollapse = 'discard'; break;
					case 'separate' : oneElement.style.webkitMarginBottomCollapse = 'separate'; break;
					default : break;
				}
			}
			else if(methodString == 't') {
				switch(eff) {
					case 'collapse' : anotherElement.style.webkitMarginTopCollapse = 'collapse'; break;
					case 'discard' : anotherElement.style.webkitMarginTopCollapse = 'discard'; break;
					case 'separate' : anotherElement.style.webkitMarginTopCollapse = 'separate'; break;
					default : break;
				}
			}
			else if(methodString == 'c') {
				switch(eff) {
					case 'collapse' : oneElement.style.webkitMarginCollapse = 'collapse'; break;
					case 'discard' : oneElement.style.webkitMarginCollapse = 'discard'; break;
					case 'separate' : oneElement.style.webkitMarginCollapse = 'separate'; break;
					default : break;
				}
			}
		};
	adjustBox.onmousedown = function(event) {
		var e = event ? event : window.event,
			target = e.target || e.srcElement,
			effection = '',
			method = '';
		if(target.parentNode.nodeName.toLowerCase() == 'label') {
			effection = target.parentNode.childNodes[1].nodeValue;
			method = target.parentNode.parentNode.childNodes[0].innerHTML;
		}
		else if(target.nodeName.toLowerCase() == 'label') {
			effection = target.childNodes[1].nodeValue;
			method = target.parentNode.childNodes[0].innerHTML;
		}
		if(target.type != 'range') makeEffects(method.substr(15,1),effection);
	}
	adjustBox.onchange = function(event) {
		var e = event ? event : window.event,
			target = e.target || e.srcElement;
		if(target.type == 'range' && target.id == 'slideStart') {
			pop1.innerHTML = '<b></b>margin-left:20px;<br />And my left margin has been covered.';
			oneElement.style.marginLeft = '20px';
			target.nextSibling.getElementsByTagName('i')[0].innerHTML = target.value;
			oneElement.style.webkitMarginStart = target.value + 'px';
		}
	}
</script>

</body>
</html>
